//这个文件就是一个JS文件通过node 中的模块操作，向外暴露一个配置文件
//导入在内存中生存的插件
const path = require('path');
// 只要是插件，都一定要放到
//主动在内存中生成一个页面，主动把打包好的bundle.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin');
// const VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',

  },
  mode: "development",
  devServer: {
    // 这是配置dev-server命令参数，这种方式比较复杂

    open: true,//自动打开浏览器
    port: 3000,//设置启动端口
    // contentBase:'src', //指定的更目录
    hot: true//启用热更新的第一步

  },
  plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    }),

    // var VueLoaderPlugin=require('vue-loader/lib/plugin')
// new VueLoaderPlugin()
  ],
  module: {
    // 这个节点，用于配置所有第三方模块的加载器
    rules: [

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },//从右到左调用
      // 配置处理CSS文件
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=632&name=[hash:8]-[name].[ext]' },//处理图片路径的dev
      //  limit给的值大于图片的值则转为base64位，小于则不转   哈希值最大32位
      { test: /.(eot|ttf|svg|woff|woff2)$/, use: 'url-loader' },
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      // 配置babel来转化高级语法

      {test:/\.vue$/,use:'vue-loader'}
    ]
  },
  resolve:{
    alias:{//这是设置vue导入的路径
      // "vue$":"vue/dist/vue.js"
    }
  }


};